<template>
  <div class="h100">
    <div class="news-top" @click="gohome()">
      <img src="~@/assets/reception/logo.png" />
    </div>
    <div class="news-bac">
      <img src="~@/assets/reception/news/detail.png" alt="" >
    </div>
    <div class="news-main">
      <div class="news-detail">
        <div class="a-df" style="margin: 0 auto;">
          <span class="news-title">
            <span>News Center </span>&nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp;<span class="news-title-eng">新闻中心</span>
          </span>
        </div>
      </div>
      <div :class="{
          card: true,
          flipped: flipped,
        }">
        <div class="news-items front">
          <div v-for="item in newsList" :key="item.ID" class="news-item"  @click="routerpush(item.ID)">
            <img :src=" upload + item.Imgs" />
            <span class="news-item-title">{{ item.NAME }}</span>
            <span class="news-item-content">{{ copyText(item.MS) }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="news-bac-bottom">
      <img src="~@/assets/reception/background2.png" alt="" >
    </div>
  </div>
</template>

<script>
import { getAppGetNewsListApi } from '@/api/resService'

export default {
  name: 'newsIndex',
  components: {
  },
  data () {
    return {
      flipped:false,
      newsList:[],
      newsItemID:'',
      upload:process.env.VUE_APP_API_BASE_URL,
    }
  },
  methods: {
    copyText(val) { // 要判断一下,如果是空就返回空字符串,不然会报错
      if (val != null && val != '') {
        var reg = /[\u4e00-\u9fa5]/g
        var names = val.match(reg)
        val = names.join('')
        return val.substr(0, 100) + '...';//获取富文本文字内容的前50个字符
      } else return ''
    },
    displayContent(text) {
      if ( text <= 100) {
        return text;
      }
      return text.substring(0, 100) + '...';
    },
    getAppGetNewsList(){
      getAppGetNewsListApi(
        {
          pageSize:10,
          pageIndex:1,
          Fid:2,
        }
      ).then((res) => {
        console.log('res',res);
        this.newsList = res.data
      })
      .catch((err) => {
      })
      .finally(() => {
      })
    },
    routerpush(id){
      this.$router.push({ path: '/reception/news/newsdetail', query: { id: id }}); 
    },
    gohome() {
      this.$router.push({ path: '/reception/findServices/index' });
    },
  },
  mounted() {
    this.getAppGetNewsList()
  },
}
</script>

<style lang="less" scoped >
.news-top{
  height: 60px;
  background: #fff;
  padding: 10px 100px ;
  cursor: pointer;
  img{
    height: 40px;
    display: block;
  }
}
.news-bac{
  img{
    height: 330px;
    width: 100%;
  }
}
.news-main{
  margin-top:30px ;
  .functional-module{
    width: 130px;
    margin-top:10px ;
    display: flex;
    flex-direction:column;
    position: absolute;
    left: 10px;
    img{
      margin: 5px 0;
      // height: 95px;
      cursor: pointer;
    }
  }
  .news-detail{
    margin: 0 auto;
    width: 1600px;
    display: flex;
    .news-title{
      color: #444444;
      font-size:24px ;
      display: block;
      line-height: 30px;
      margin: 0 10px;
      display: flex;
      // flex-direction: column;
      .news-title-eng{
        // font-size: 14px;
        // margin-top:-10px ;
        color: #926020;
      }
      // margin: 0 auto;
      // border-bottom: 2px solid #1e50ae;
    }
    
  }
  .news-items{
      display: flex;
      flex-wrap: wrap;
      .news-item{
        width: 30%;
        // height: 300px;
        margin: 20px auto;
        overflow: hidden;
        border: #e7e7e7 1px solid;
        border-radius:10px ;
        padding-bottom:10px ;
        cursor: pointer;
        .news-item-title{
          font-size: 20px;
          display: block;
          margin: 10px 15px;
        }
        .news-item-content{
          display: block;
          margin: 10px 15px;
        }
        img{
          width: 100%;
          height: 200px;
        }
      }
    }
}
.news-bac-bottom{
  // position: absolute;
  // bottom: -400px;
  width: 100%;
  img{
    height: 180px;
    width: 100%;
  }
}
</style>